<template>
  <div class="cServiceDrag" :class="{'type':type == '1'}" v-if="showService">
    <div id="kefuw" @click="goArtificial"
      ref="draggable"
      @mousedown="dragStart"
      @touchstart="dragStart"
      :style="{left: x + 'px', top: y + 'px'}"
    ></div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch, defineEmits } from 'vue'
import { useRoute } from 'vue-router';

name: "cServiceDrag"

const props = defineProps({
  autoClose:{
    type:Boolean,
    default:false,
  },
  type:{
    type:String,
    default:""
  }
})
const emit = defineEmits(['artificial', 'coordinate'])

const route = useRoute()

const timers = ref<any>(null)
const canOpenEnd = ref<any>(false)
const count = ref<any>(0)
const showService = ref<any>(true)

const draggable = ref(null);
const x = ref(-29);
const y = ref(400);

watch(() => route.path, (val) => {
  if (val == '/login') {
    showService.value = false
  } else {
    showService.value = true
  }
})

function dragStart(event) {
  event.preventDefault();
  document.addEventListener('mousemove', drag);
  document.addEventListener('touchmove', drag);
  document.addEventListener('mouseup', dragEnd);
  document.addEventListener('touchend', dragEnd);

  function drag(event) {
    const clientX = event.touches ? event.touches[0].clientX : event.clientX;
    const clientY = event.touches ? event.touches[0].clientY : event.clientY;
    x.value = clientX - draggable.value.offsetWidth / 2;
    y.value = clientY - draggable.value.offsetHeight / 2;
  }

  function dragEnd() {
    document.removeEventListener('mousemove', drag);
    document.removeEventListener('touchmove', drag);
    document.removeEventListener('mouseup', dragEnd);
    document.removeEventListener('touchend', dragEnd);
    setTimeout(() => {
      console.log('坐标', x.value, y.value)
    }, 100)
  }
  drag(event);
}

onMounted(() => {
  
})

const goArtificial = () => {
  emit('artificial', '开发中，敬请期待！')
  setTimeout(() => {
    emit('coordinate', x.value, y.value)
  }, 100)
}

</script>

<style lang="scss" scoped>
.cServiceDrag {
  cursor: pointer;
  #kefuw {
    position: fixed;
    // right: -29px;
    // bottom: 130px;
    // top:400px;
    height: 60px;
    width: 58px;
    background-image: url("./img/kefu_logo.png");
    // background-image: url("./img/wangjian_logo.png");
    background-repeat: no-repeat;
    background-size: cover;
    z-index:100;
  }
  &.type{
    #kefuw{top: 426px;}
  }
}
</style>
